import { Button, Input} from 'antd';
import {WeaTab, WeaLeftRightLayout, WeaFormItem, WeaInput, WeaTools, WeaLocaleProvider} from 'ecCom';
import React from 'react';
import SerachForm from './MainSearchForm'
import {WeaForm} from 'comsMobx';
import { inject, observer} from 'mobx-react'
const getLabel = WeaLocaleProvider.getLabel;

@inject("myForm","myParame")
@observer
class TopColume extends  React.Component{
    constructor(props){
        super(props);
    }

    /**
     * tab的切换
     * @param v 当前点击tab的key值
     */
    fnOnChangeClick(v) {
        const {myParame, myForm} = this.props;
        const {form} = myForm;
        form.resetForm();
        myParame.setSelectedKey(v);//修改高亮的tabkey
        myParame.setParame();//清空参数
        myParame.setShowSearcheAd(false);//关闭高级搜索
    }

    /**
     * 取消高级搜索
     * @param value
     */
    fnCancelSearch = (value) => {
        let {myParame} = this.props;
        myParame.setShowSearcheAd(value);
    }

    /**
     * 获得弹出框的底部按钮
     * @returns {*[]}
     */
    getTabButtonsAd() {
        let {myForm, myParame} = this.props;
        const {form} = myForm;
        return [
            (<Button type="primary" onClick={()=>{myParame.setParame( form.getFormParams()); myParame.setShowSearcheAd(false);}}>{getLabel(388113,"搜索")}</Button>),
            (<Button type="ghost" onClick={()=> form.resetForm()}>{getLabel(2022,"重置")}</Button>),
            (<Button type="ghost" onClick={()=>this.fnCancelSearch()}>{getLabel(201,"取消")}</Button>)
        ]
    }

    /**
     * 搜索框的改变联动改变状态便于，普通搜索与高级搜索的名称联动显示
     * @param value
     */
    fnSearchChange = (value) => {
        const {myForm} = this.props;
        const {form} = myForm;
        form.updateFields({name:value});//直接修改高级搜索的数据
    }

    render(){
        const {myParame, myForm, myheight} = this.props;
        const {form} = myForm;
        const {showSearchAd, selectedKey, toptab, setParame} = myParame;
        if(!selectedKey || toptab.length <1) {
            return (<div></div>);
        }
        let searchtype = [];
        if (toptab[selectedKey] && toptab[selectedKey].searchtype) {
            searchtype =  toptab[selectedKey].searchtype;
        }
        const rightbtn = [
            (<div style={{  textAlign: "center"}}>
                <SerachForm myParame={myParame}/>
            </div>),
        ]
        return  (
            <WeaTab
                datas={toptab}
                keyParam="viewcondition"  //主键
                // searchType={['base', 'advanced']}//搜索类型 基础，高级等
                searchType={searchtype}//搜索类型 基础，高级等
                searchsBaseValue={form.getFormParams().name } //给基础搜索设置值
                searchsAd={rightbtn}
                advanceHeight={myheight}
                buttonsAd={this.getTabButtonsAd()}
                showSearchAd={showSearchAd}
                setShowSearchAd={bool =>this.fnCancelSearch(bool) }
                selectedKey={selectedKey}
                onChange={v => this.fnOnChangeClick(v) }
                hasMask={false}
                onSearchChange={value=> this.fnSearchChange(value)}
                onSearch={(value) =>  setParame({name:value})  }
            ></WeaTab>
        )
    }
}

export default  TopColume